<template>
    <!-- //点赞组件 -->
    <div>
        <!-- //点赞组件 -->
        <!-- 根据value.attitude值判断图标颜色跟图标 -->
        <van-icon :color="value===1? 'red': ''"
         :name="value===1? 'good-job': 'good-job-o'"
        @click="onattitude" />
    </div>
</template>

<script>
import { addattitude, deleteattitude } from '@/api/acticle'
export default {
  name: 'atticleIndex',
  props: {
    // value 值为1表示喜欢，0表示无态度，-1表示不喜欢
    value: {
      type: Number,
      requried: true
    }
  },
  methods: {
    async onattitude () {
      const Id = this.$route.params.articleId
      try {
        if (this.value === 1) {
        // 2.如果为1表示点赞，取消点赞
          // 2.1 后台更新
          await deleteattitude(Id)
          this.$toast('取消点赞') // 提示用户
          // 视图更新
          this.$emit('input', 0)
        } else if (this.value === 0 || this.value === -1) {
        // 3.如果为0或-1表示未点赞，进行点赞
          // 3.1后台更新
          await addattitude(Id)
          this.$toast('点赞') // 提示用户
          // 3.2视图更新
          this.$emit('input', 1)
        }
      } catch (err) {
        this.$toast('操作失败') // 提示用户
      }
      // 1.判断文章是否被点赞
    }
  }
}
</script>

<style scoped lang="less">
/deep/.color{
    color:red
}

</style>
